<template>
    <base-dialog v-bind="$attrs" v-on="$listeners" title="请上传维修后照片" @submit="submit" width="600px">
        <my-upload-image v-model="file" multiple  :limit="5" :on-exceed="masterFileMax"></my-upload-image>
        <div class="addGoods">
            <el-button  type="primary" plain @click="listVisible=true">添加物品</el-button>
            <span @click="goodsList=[]" v-if="goodsList.length>0">清空所有物品</span>
        </div>
        <el-table
                class="goodList"
                :data="goodsList"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="商品名称">
            </el-table-column>
            <el-table-column
                    prop="stock"
                    label="库存">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="数量">
                <template slot-scope="{row}">
                    <el-input-number v-model="row.num"  size="mini" :max="row.stock" @change="changeNum(row)"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作" width="100px">
                <template slot-scope="{row}">
                  <el-button type="text" size="mini" @click="delGoods(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <goods-list-dialog   :visible.sync="listVisible" v-if="listVisible"  @complete="getGoods" ></goods-list-dialog>
    </base-dialog>
</template>
<script>
    import BaseDialog from "@/components/Common/BaseDialog";
    import MyUploadImage from "@/components/Common/MyUploadImage";
    import list from "@/api/onlineRepair/list"
    import goods from "@/api/goodsManagement/goods"
    import GoodsListDialog from "@/views/goodsManagement/category/GoodsListDialog";

    export default {
        name: "UploadRepairImage",
        components: {GoodsListDialog, MyUploadImage, BaseDialog},
        props: ["row"],
        data() {
            return {
                goodsList:[],
                listVisible:false,
                num:1,
                file: ""
            }
        },
        methods: {
            delGoods(row){
                this.goodsList = this.goodsList.filter(item=>{
                    return item.id!==row.id
                })

            },
            changeNum(row){
                goods.goodsQuantity(row.id,{count:row.num}).then(res=>{
                }).catch(res=>{
                    row.num--
                })
            },
            getGoods(obj) {
                let json = this.goodsList.concat(obj); //两个数组对象合并
                let newJson = []; //盛放去重后数据的新数组
                for(let item1 of json){ //循环json数组对象的内
                    let flag = true; //建立标记，判断数据是否重复，true为不重复
                    for(let item2 of newJson){ //循环新数组的内容
                        if(item1.id==item2.id){ //让json数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
                            flag = false;
                        }
                    }
                    if(flag){ //判断是否重复
                        newJson.push(item1); //不重复的放入新数组。 新数组的内容会继续进行上边的循环。
                    }

                }
                this.goodsList = newJson
                this.goodsList.map((item,index)=>{
                    this.$set(this.goodsList[index],"num",1)
                })
            },
            masterFileMax(files, fileList) {
                this.$message.warning(`请最多上传 2 个文件`);
            },
            submit() {
                if(!this.file){
                  this.$message.warning(`请上传维修后的照片`);
                  return false;
                }else{
                  let data = []
                  this.goodsList.map((item,index)=>{
                    let itemT = {
                      id: item.id,
                      num: item.num
                    };
                    data.push(itemT)
                  })
                  list.toFixPhoto(this.row.id, {fix_files: this.file}).then(res => {
                      this.msgSuccess(res.data.msg)
                      this.$emit("callback",{goods:data})
                      this.$emit("update:visible", false)
                  })
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .addGoods{
        padding:15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >span{
            color: #888;
        }
    }
    .goodList{
        ::v-deep .el-input-number--mini{
            width: 100px;
            margin-right: 15px;
        }
        li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:10px 0;
            border-bottom:1px solid #eee;

        }

    }
</style>
